<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			body{
				background-color: #f1f1f1;
			}
			
			.p1{
				background-color: white;
				width: 100%;
				margin-bottom: 20px;
			}
			
			.p11{
				width: 100%;
				height: 400px;
				display: flex;
				justify-content: center;
				align-items:center;
			}
			.p12{
				list-style-type: none;
				background-color: black;
				margin: 0;
				padding: 0;
			}
			.p12 li{
				display: inline-block;
				color: white;
				height: 70px;
				line-height: 70px;
				padding: 0 20px;
				cursor: pointer;
			}
			.p12 li:last-child{
				float: right;
			}
			.p12 li:hover{
				background-color: aliceblue;
				color: black;
			}
			.p2{
				background-color: white;
				padding: 20px 15px;
				margin-bottom: 20px;
			}
			.p21{
				height: 200px;
				background-color: #aaa;
			}
			.p3{
				height: 150px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #aaa;
			}
			
			
			@media screen and (max-width:600px){
				.p12 li{
					display: block;
				}
				.p12 li:last-child{
					float: none !important;
				}
			}
		</style>
	</head>
	<body>
		<div class="p1">
			<div class="p11">
				<table>
					<tr><td><h1>我的网页</h1></td></tr>
					<tr><td><p>重置浏览器查看组件</p></tr>
				</table>
			</div>
			<ul class="p12">
				<li>链接</li>
				<li>链接</li>
				<li>链接</li>
				<li>链接</li>
			</ul>
		</div>
		<div class="p2">
			<h1>文章标题</h1>
			<h5>2025年1月7日</h5>
			<div class="p21"></div>
			<p>一些文本</p>
			<p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！</p>
		</div>
		<div class="p2">
			<h1>关于我</h1>
			<div class="p21"></div>
			<p>关于我的一些信息</p>
		</div>
		<div class="p2">
			<h2>热门文章</h2>
			<div class="p21"></div>
		</div>
		<div class="p2">
			<h2>关注我</h2>
			<p>一些文本.....</p>
		</div>
		<div class="p3">
			<h1>底部区域</h1>
		</div>
	</body>
</html>